<template>
  <div class="left">
    <div>
      <div class="recommendcity">推荐城市</div>
      <a class="recommendcityimagesize" href="#"
        ><img
          src="https://n3-q.mafengwo.net/s10/M00/E8/E4/wKgBZ1octoCABhgLAAafahORRLs91.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90"
          alt=""
      /></a>
    </div>
    <div>
      <div class="hotcity" @mouseleave="hideDrop">
        <div class="dropedit1">
          <ul>
            <li
              @mouseenter="handleDrop(index)"
              v-for="(item, index) in handleDrops"
              :key="index"
              class="listcity"
            >
              {{ item.type }}<i class="el-icon-arrow-right"></i>
            </li>
          </ul>

          <div class="dropedit2" v-if="isShow">
            <ul>
              <li
                v-for="(item, index) in childrens"
                :key="index"
                @click="handle(item.city)"
              >
                <a
                  style="display: block; width: 100%; height: 100%"
                  href="javascript:void(0)"
                >
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.city }}</span>
                  <span>{{ item.desc }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      handleDrops: [],
      listData: [],
      isShow: false,
      index: 0,
      childrens: [],
    };
  },
  created() {
    this.recommendDetail();
    this.handleDropsData();
  },
  methods: {
    recommendDetail() {
      this.$axios({
        url: "/posts/recommend",
      }).then((res) => {
        this.listData = res.data.data;
      });
    },
    handleDrop(index) {
      this.index = index;
      if (this.index == index) {
        this.isShow = true;
      }
      this.getIndex();
    },
    hideDrop() {
      this.isShow = false;
    },
    handleDropsData() {
      this.$axios({
        url: "/posts/cities",
      }).then((res) => {
        this.handleDrops = res.data.data;
      });
    },
    getIndex() {
      this.childrens = this.handleDrops[this.index].children;
    },
    handle(city) {
      this.$emit("cityData", city);
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 260px;
  height: 450px;
  padding-left: 10px;
  .recommendcity {
    width: 96%;
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #d3d3d3;
    padding-left: 10px;
    color: #444;
    font-size: 16px;
    font-weight: 400;
  }
  .recommendcityimagesize {
    display: block;
    width: 100%;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
}
.hotcity {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #444;
  font-size: 14px;
  font-weight: 400;
  ul {
    height: 145px;
    li {
      border: 1px solid #ddd;
      padding-left: 10px;
      cursor: pointer;
      margin-top: -1px;
      i {
        float: right;
        padding-right: 10px;
        line-height: 35px;
      }
    }
  }
  li:hover {
    background: #f4f4f4;
    border-right: 0;
  }
  .dropedit2 {
    position: absolute;
    top: 187px;
    left: 270px;
    width: 630px;
    height: 185px;
    margin-top: -1px;
    background: #ffffff;
    display: block; //隐藏
    z-index: 5;
    ul {
      li {
        a {
          span {
            padding: 0 50px;
            font-size: 16px;
          }
        }
        &:hover {
          background-color: rgb(247, 239, 239);
        }
      }
    }
  }
}
.dropedit1:hover .dropedit2 {
  display: block;
}
</style>